<template>
<!-- 医疗报案 -->
    <el-card class="box-card">
        <div slot="header" class="card-heaer">
            <span style="line-height: 36px;">医疗报案信息</span>
            <el-button type="danger" style="float:right" @click="delect" v-if="newState=='新增'|| (newState=='待办任务' && isNewAdd)">删除</el-button>
        </div>
        <el-form ref="form" :model="fromlist[model].obj" :rules="medicalrules" label-width="180px">
    
            <el-form-item label="保险事故发生所在地:" prop="RI_MEDICAL_ADDRESS">
                <el-radio-group style="float:left; ">
                    <el-cascader  :disabled=" newState=='审核' || (newState=='追加' && !isNewAdd ) || (newState=='待办任务' && !newIsEditer )" :options="address" v-model="fromlist[model].obj.RI_MEDICAL_ADDRESS">
                    </el-cascader>
                </el-radio-group>
            </el-form-item>
             <el-form-item label="疾病发生时间:" prop="RI_MEDICAL_TIME">
               <el-date-picker v-model="fromlist[model].obj.RI_MEDICAL_TIME" type="date" :disabled=" newState=='审核' || (newState=='追加' && !isNewAdd ) || (newState=='待办任务' && !newIsEditer )" placeholder="选择日期时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="详细地址:" prop="RI_MEDICAL_DADDRESS">
                <el-input v-model="fromlist[model].obj.RI_MEDICAL_DADDRESS" :disabled=" newState=='审核' || (newState=='追加' && !isNewAdd ) || (newState=='待办任务' && !newIsEditer )" style="float:left; width:200px; padding-left:5px"></el-input>
            </el-form-item>
            <el-form-item label="详情描述:" prop="RI_MEDICAL_DETAIS">
                <el-input type="textarea" v-model="fromlist[model].obj.RI_MEDICAL_DETAIS" :disabled=" newState=='审核' || (newState=='追加' && !isNewAdd ) || (newState=='待办任务' && !newIsEditer )"></el-input>
            </el-form-item>
            <el-form-item label="就医医院:" prop="RI_MEDICAL_HTYPE">
                <el-radio-group v-model="fromlist[model].obj.RI_MEDICAL_HTYPE" :disabled=" newState=='审核' || (newState=='追加' && !isNewAdd ) || (newState=='待办任务' && !newIsEditer )" @change="changerType">
                    <el-radio label="力众推荐"></el-radio>
                    <el-radio label="客户自选"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="医院名称:" prop="RI_MEDICAL_HLNAME" v-show="fromlist[model].obj.RI_MEDICAL_HTYPE=='力众推荐'">
                <el-input v-model="fromlist[model].obj.RI_MEDICAL_HLNAME" :disabled="true" style="float:left; width:200px; padding-left:5px"></el-input>
                <el-button type="primary" style="float:left;margin-left:20px;" @click="hospatialShow = true" :disabled=" newState=='审核' || (newState=='追加' && !isNewAdd ) || (newState=='待办任务' && !newIsEditer )">选择医院</el-button>
            </el-form-item>
            <el-dialog title="推荐医院" :visible="hospatialShow" :before-close="showHospatial">
                <el-table ref="singleTable" :data="hospatialList" highlight-current-row @current-change="handleCurrentChange">
                    <el-table-column type="index" width="50">
                    </el-table-column>
                    <el-table-column prop="RECOMMENDHOSPITAL_NAME" label="名称" width="120">
                    </el-table-column>
                    <el-table-column prop="RECOMMENDHOSPITAL_TYPE" label="类型" width="120">
                    </el-table-column>
                    <el-table-column prop="RECOMMENDHOSPITAL_TEL" label="电话" width="120">
                    </el-table-column>
                    <el-table-column prop="RECOMMENDHOSPITAL_ADDRESS" label="地址" width="120">
                    </el-table-column>
                    <el-table-column prop="RECOMMENDHOSPITAL_DISTANCE" label="距离" width="120">
                    </el-table-column>
                </el-table>
            </el-dialog>
            <el-form-item label="医院名称:" prop="RI_MEDICAL_HLNAME" v-show="fromlist[model].obj.RI_MEDICAL_HTYPE=='客户自选'">
                <el-input v-model="fromlist[model].obj.RI_MEDICAL_HLNAME" :disabled=" newState=='审核' || (newState=='追加' && !isNewAdd ) || (newState=='待办任务' && !newIsEditer )"></el-input>
            </el-form-item>
            <el-form-item label="审核:" v-if="newState=='审核'|| ( newState=='追加'&& !isNewAdd)">
                <el-select placeholder="审核" v-model="fromlist[model].obj.RI_MEDICAL_STATE" :disabled=" (newState=='审核' && oldState!='需审核') || (newState=='追加' && !isNewAdd ) ">
                    <el-option label="审核通过" value="审核通过"></el-option>
                    <el-option label="退回重新填写" value="需修改"></el-option>
                    <el-option label="拒赔" value="审核不通过"></el-option>
                </el-select>
            </el-form-item>
    
            <el-form-item label="拒赔原因:" v-if="fromlist[model].obj.RI_MEDICAL_STATE=='审核不通过'">
                <el-input v-model="fromlist[model].obj.RI_MEDICAL_WHY" :disabled="newState!='审核'" style="float:left; width:400px; padding-left:5px"></el-input>
            </el-form-item>
            <el-form-item label="修改原因:" v-if="fromlist[model].obj.RI_MEDICAL_STATE=='需修改'">
                <el-input v-model="fromlist[model].obj.RI_MEDICAL_WHY" :disabled="newState!='审核'" style="float:left; width:400px; padding-left:5px"></el-input>
            </el-form-item>
            <div class="space20">
            </div>
        </el-form>
    </el-card>
</template>
<script>
import {
    mapState
} from 'vuex';
export default {
    data() {
        return {
            medical: this.$store.state.reportform.medical,
            oldState: this.$store.state.reportform.fromlist[this.model].obj.RI_MEDICAL_STATE,
            showwhy: false,
            hospatialList: [],
            hospatialShow: false
        }
    },

    props: {
        //对象
        model: {
            type: Number,
            default: 0
        },

        //状态2.0 新增 追加 待办任务
        newState: {
            type: String,
            default: "新增"
        },
        //状态2.0 代办任务中是否是需修改的 默认是true
        newIsEditer: {
            type: Boolean,
            default: true
        },
        //状态2.0 追加中是否是新增 默认是false 可以编辑
        isNewAdd: {
            type: Boolean,
            default: false
        },
        //是否可编辑

        //是否是审核
        ischeck: {
            type: Boolean,
            default: false
        },

    },

    methods: {
        changerType() {
            var type = this.fromlist[this.model].obj.RI_MEDICAL_HTYPE;
            if (type == "客户自选") {
                this.$alert('请提示客户,自选的医院如为非保险人认可的医疗机构，医疗费用的赔付比例会较低', '提示', {
                    confirmButtonText: '确定',
                });
            }
            this.fromlist[this.model].obj.RI_MEDICAL_HLNAME = "";
        },
        showHospatial() {
            this.hospatialShow = false;
        },

        handleCurrentChange(val) {
            this.currentRow = val;        
            if (val != null && val != {})
                this.fromlist[this.model].obj.RI_MEDICAL_HLNAME = val.RECOMMENDHOSPITAL_NAME;
            this.hospatialShow = false;
        },
        delect() {

            if (this.model !== -1) {
                this.fromlist.splice(this.model, 1)
            }
        }
    },
    computed: mapState({
        // 箭头函数可使代码更简练
        // medical: state => state.reportform.medical,
        address: state => state.select.address,
        medicalrules: state => state.reportform.medicalrules,
        fromlist: state => state.reportform.fromlist
    }),
    activated() {
        //如果是审核
        var saleno;
        var that = this;
        if (this.newState == "新增" && JSON.parse(sessionStorage.getItem("ReportUser")) != null) {
            saleno = JSON.parse(sessionStorage.getItem("ReportUser"))[0].SALEDETAILNO || this.$route.query["sid"];
        } else {
            saleno = this.$route.query["sid"];
        }
        that.$http.get("RecommendHospital/" + saleno).then(response => {
            var data = response.body;
            if (data.code == 1) {
                that.hospatialList = data.result;

            } else {
                that.$notify.error({
                    title: '失败',
                    message: '数据获取失败'
                });
            }
        }, response => {
            that.$notify.error({
                title: '网络错误',
                message: '网络错误'
            });
        });
    }
}
</script>
